<template>
    <div class="template">
        <div class="make">
            <div class="nav">
                <img :src="back" style="width: 62px;" @click="router.back()"/>
                <img :src="poster" style="height: 37px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"/>
                <img :src="save" style="width: 83px;" @click="downLoad"/>
            </div>
            <div class="getPic" ref="getPic">
                <div style="width: 100%;height: 100%;position: relative;" v-if="!picStyle.baseImg" @click="pushBaseImg">
                    <img :src="add" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 20%;"/>
                </div>
                <div v-else style="width: 100%;height: 100%;position: relative;overflow: hidden;">
                    <img :src="picStyle.baseImg" style="position: absolute;top: 0;left: 0;width: 100%;"/>
                    <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" :style="{backgroundColor: `rgba(0, 0, 0, ${picList[picStyle.lujingID]})`}"></div>
                    <img :src="base64Pic.basic[picStyle.basicID]" style="position: absolute;top: 0;left: 0;width: 100%;" v-if="picStyle.basicID != -1"/>
                    <Vue3DraggableResizable
                  :initW="100"
                  :initH="100"
                  v-model:w="dialogPic.width"
                  v-model:h="dialogPic.height"
                  v-model:x="dialogPic.x"
                  v-model:y="dialogPic.y"
                  :minW="10"
                  :minH="40"
                  :draggable="true"
                  :resizable="true"
                  :parent="true"
                  :handles="['br']"
                  classNameHandle="my-handle"
                  classNameActive="my-active"
                  @activated="dialogActive = true"
                  @deactivated="dialogActive = false"
                  v-if="picStyle.stickerID != -1"
                  style="z-index: 999;"
                >
                  <div style="width: 100%;height: 100%;position: relative;">
                      <div class="closedialog" @click="() => {picStyle.stickerID = -1; dialogActive = false;}" v-show="dialogActive"></div>
                      <img :src="base64Pic.sticker[picStyle.stickerID]" alt="Zoomable Image" :style="{width: dialogPic.width-5 +'px', height: dialogPic.height-5+'px'}" />
                  </div>
            </Vue3DraggableResizable>
            <Vue3DraggableResizable
                  :initW="150"
                  :initH="80"
                  v-model:w="textPic.width"
                  v-model:h="textPic.height"
                  v-model:x="textPic.x"
                  v-model:y="textPic.y"
                  :minW="10"
                  :minH="40"
                  :draggable="true"
                  :resizable="true"
                  :parent="true"
                  :handles="['br']"
                  classNameHandle="my-handle"
                  classNameActive="my-active"
                  @activated="textActive = true"
                  @deactivated="textActive = false"
                  v-if="picStyle.fontText"
                  style="z-index: 999;"
                >
                  <div style="width: 100%;height: 100%;position: relative;display: flex;align-items: center;justify-content: center;">
                      <div class="closedialog" @click="() => {picStyle.fontText = ''; textActive = false;}" v-show="textActive"></div>
                      <div class="textStyle" style="width: 100%;word-wrap: break-word;" :style="{color: colorList[picStyle.fontColor], fontFamily: familyList[picStyle.fontFamily], fontSize: `${picStyle.fontSize}px`}">{{ picStyle.fontText }}</div>
                    </div>
            </Vue3DraggableResizable>
                </div>

            </div>
        </div>
        <div class="mean">
            <div class="meanList">
                <div :class="checkMeanId == index ? 'meanItem checkItem' : 'meanItem'" @click="checkMeanId = index" v-for="(item, index) in meanItem" :key="index">
                    <img :src="item" />
                </div>
            </div>
            <div class="desc" :style="{padding: checkMeanId == 3 ? '15px 18px' : '30px 18px'}">
                <div class="descList" v-if="checkMeanId == 0">
                    <div v-for="(item, index) in base64Pic.basic" :key="index" class="itemBlock" @click="checkbasic(index)">
                        <img :src="item" />
                    </div>
                </div>
                <div class="descList" v-if="checkMeanId == 1">
                    <div v-for="(item, index) in base64Pic.sticker" :key="index" class="itemBlock" @click="checksticker(index)" style="position: relative;">
                        <img :src="item" />
                        <img :src="coins" style="position: absolute;bottom: 10px;right: 10px;width: 25px;" v-if="index > 2"/>
                    </div>
                </div>
                <div class="descList" v-if="checkMeanId == 2">
                    <div v-for="(item, index) in lujingList" :key="index" class="itemBlock" @click="checklujing(index)" style="position: relative;">
                        <img :src="lujing" :style="{filter: `brightness(${item})`}"/>
                        <img :src="coins" style="position: absolute;bottom: 10px;right: 10px;width: 25px;" v-if="index > 0"/>

                    </div>
                </div>
                <div class="descList" v-if="checkMeanId == 3">
                    <div class="info">
                        <div>Add Text</div>
                        <van-field type="textarea" v-model="picStyle.fontTextDemo"  placeholder="Enter Text" style="width: 90%;height: 65%; border-radius: 11px;"/>
                        <div class="done" @click="done">Done</div>
                    </div>
                    <div class="infoStyle">
                        <div class="checkColor">
                            <div class="checkColor">
                                <div v-for="(item, index) in colorList" :key="index" @click="picStyle.fontColor = index" class="colorBlock" :style="{backgroundColor: item}"></div>
                            </div>
                        </div>
                        <div class="checkFamily">
                            <div v-for="(item, index) in familyList" :key="index" @click="picStyle.fontFamily = index" class="familyItem" :style="{fontFamily: item}">Font</div>
                        </div>
                        <div class="tip">Font Size:</div>
                        <div style="padding: 0 10px;box-sizing: border-box;">
                            <van-slider v-model="picStyle.fontSize" style="height: 10px;" @change="onChange">
                              <template #button>
                                <div class="custom-button"></div>
                              </template>
                            </van-slider>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script setup>
import html2canvas from "html2canvas";
import { showToast, showConfirmDialog } from "vant";
import coins from '../assets/coins.png'
import poster from '../assets/poster@2x.png'
import lujing from '../assets/lujingdemo@2x.png'
import add from '../assets/add.png'
import back from '../assets/back@2x.png'
import save from '../assets/save@2x.png'
import basic from '../assets/basic@2x.png'
import sticker from '../assets/sticker@2x.png'
import colors from '../assets/colors@2x.png'
import school from '../assets/school@2x.png'
import { base64Pic } from '../base64'
const familyList = ['TitanOne-Regular', 'PassionOne-Regular', 'PatrickHand-Regular', 'poppinsbold', 'PollerOne']
let meanItem = [basic, sticker, colors, school]
let lujingList = [1, 0.8, 0.6, 0.4]
let picList = [0, 0.4, 0.6, 0.8]
const colorList = ['#FFFFFF', '#000000', '#FB3C04', '#FF9645', '#41AD99', '#69CCBA', '#3C56D1', '#A4C1D3', '#D5DBED', '#A5AED8']
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue'
const router = useRouter()


const checkMeanId = ref(0)
const picStyle = ref({
    baseImg: '',
    basicID: -1,
    lujingID: 0,
    stickerID: -1,
    fontTextDemo: '',
    fontText: '',
    fontColor: 1,
    fontFamily: 0,
    fontSize: 18
})
let dialogPic = ref({
    width: 200,
    height: 200,
    x: 0,
    y: 0,

})
let dialogActive = ref(false)
let textPic = ref({
    width: 400,
    height: 100,
    x: 20,
    y: 20
})
let textActive = ref(false)


const pushBaseImg = () => {
    window['picture'] = (data)=>{
        picStyle.value.baseImg = data
	}
	window['send'](`terms://photo?type=0`);
}
const checkbasic = (index) => {
    if (!picStyle.value.baseImg) {
        showToast('Please upload pictures')
        return
    }
    if (picStyle.value.basicID == index) {
        picStyle.value.basicID = -1
    }else  {
        picStyle.value.basicID = index
    }
}
const checklujing = (index) => {
    if (!picStyle.value.baseImg) {
        showToast('Please upload pictures')
        return
    }
    picStyle.value.lujingID = index
}
const checksticker = (index) => {
    if (!picStyle.value.baseImg) {
        showToast('Please upload pictures')
        return
    }
    picStyle.value.stickerID = index
}
const done = () => {
    if (!picStyle.value.fontTextDemo) {
        showToast('Please enter text')
        return
    }
    if (!picStyle.value.baseImg) {
        showToast('Please upload pictures')
        return
    }
    picStyle.value.fontText = picStyle.value.fontTextDemo
    picStyle.value.fontTextDemo = ''
}
const onChange =(val) => {
    console.log(val);
    picStyle.value.fontSize = val
}
const getPic = ref()
const downLoad = () => {
    if (!picStyle.value.baseImg) {
        showToast('Please upload pictures')
        return
    }
    let type = picStyle.value.stickerID > 2 || picStyle.value.lujingID > 0
    let message = type ? 'You have used paid materials, and 10 gold coins will be deducted when saving the picture.' : 'Are you sure you want to save to photo album?'
    showConfirmDialog({
      message,
      confirmButtonText: 'Confirm',
      cancelButtonText: 'Cancel'
    }).then(() => {
        savePic(type)
    })
}
const savePic = (type) => {
    if (type && coinsNum.value<10) {
        showToast('Not enough coins')
        return        
    }
    html2canvas(getPic.value, {
        height: getPic.value.scrollHeight - 3
    }).then((canvas) => {
        let imgData = canvas.toDataURL("image/jpeg"); // 转base64
        window['reducedCoins'] = (data) => {
	            if (data === "1") {
	            } else {
                    if (type) {
                        coinsNum.value = coinsNum.value - 10
                        localStorage.setItem('MaskImageCoinsNum', coinsNum.value)
                    }
                    reSize()
	            }
	        }
	        window['album'](0, imgData);
        });
}
const reSize = () => {
    checkMeanId.value = 0
    picStyle.value = {baseImg: '',basicID: -1,lujingID: 0,stickerID: -1,fontTextDemo: '',fontText: '',fontColor: 1,fontFamily: 0,fontSize: 18}
    dialogPic.value = {width: 200,height: 200, x: 0,y: 0,}
    dialogActive.value = false
    textPic.value = {width: 400,height: 100,x: 20,y: 20}
    textActive.value = false
}
const coinsNum = ref(0)
onMounted(() => {
    coinsNum.value = localStorage.getItem('MaskImageCoinsNum') ? Number(localStorage.getItem('MaskImageCoinsNum')) : 0
})
</script>
<style scoped>
@import '../font/index.css';
.make {
    width: 100%;
    height: 60vh;
    background-color: #ACE86D;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mean {
    width: 100%;
    height: 40vh;
    overflow: hiddens;
}
.getPic {
    width: 90vw;
    height: 40vh;
    margin-top: 4vh;
    background-color: #fff;
    overflow: hidden;
}
.meanList {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 10px 0;
}
.meanItem {
    width: 66px;
    height: 66px;
    background: #D6DBFF;
    border-radius: 14px 14px 14px 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.meanItem img {
    width: 36px;
    height: 36px;
}
.checkItem {
    background-color: #DC87DE;
}
.desc {
    width: 100%;
    height: 28vh;
    background: #6979F4;
    border-radius: 30px 30px 30px 30px;
    position: fixed;
    left: 0;
    bottom: 2px;
    padding: 30px 18px;
    box-sizing: border-box;
}
.descList {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
}
.itemBlock {
    flex-shrink: 0;
    width: 152px;
    height: 100%;
    background-color: rgba(255, 255, 255, .5);
    border-radius: 23px 23px 23px 23px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.itemBlock img {
    width: 70%;
    max-height: 100%;
}
.info {
    width: 40%;
    height: 100%;
    overflow: hidden;
    background: #D6DBFF;
    border-radius: 18px 18px 18px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 12px;
    color: #000000;
    padding: 5px 0;
    box-sizing: border-box;
}
.infoStyle {
    width: 60%;
    height: 100%;
    overflow: hidden;
    margin-left: 10px;
    /* display: flex;
    flex-direction: column;
    justify-content: space-around; */
}
.done {
    width: 80%;
    height: 20%;
    background-color: #fff;
    background: #6979F4;
    border-radius: 11px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.checkColor {
    width: 100%;
    overflow: auto;
}
.colorBlock {
    width: 4vh;
    height: 4vh;
    border-radius: 34px;
    margin-bottom: 5px;
    margin-right: 1.7vw;
}
.checkColor {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}
.checkFamily {
    width: 100%;
    display: flex;
    overflow: auto;
    margin-top: 10px;
}
.familyItem {
    flex-shrink: 0;
    margin-right: 10px;
    width: 65px;
    height: 29px;
    background: #D6DBFF;
    border-radius: 6px 6px 6px 6px;
    font-weight: 600;
    font-size: 15px;
    color: #6979F4;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tip {
    font-weight: 600;
    font-size: 12px;
    color: #FFFFFF;
    margin: 2vh 0;
}
.custom-button {
    width: 15px;
    height: 15px;
    background: #FFFFFF;
    border-radius: 15px;
    border: 2px solid #6979F4;
    position: relative;
}
.custom-button::after {
    content: '';
    width: 70%;
    height: 70%;
    border-radius: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #6979F4;
}
::v-deep(.my-handle){
    width: 20px !important;
    height: 20px !important;
    border-radius: 10px;
    background: url('../assets/sf.png') no-repeat center;
    background-size: 70%;
    background-color: #000;
}
::v-deep(.my-active) {
    border: 1px solid #000 !important;
}
.closedialog {
    display: block;
    width: 20px !important;
    height: 20px !important;
    position: absolute;
    top: -16px;
    left: -16px;
    border-radius: 10px;
    background: url('../assets/close.png') no-repeat center;
    background-size: 50%;
    background-color: #000;
}
::v-deep(.van-field__body) {
    height: 100% !important;
}
::v-deep(.van-field__control) {
    height: 100% !important;
}
</style>
